<template>
<div>
    <div class="A1main">
        <div class="A1top">
            <img class="A1topimg" src="../../assets/imgs/Accountmain.png" alt="头像">
            <p class="A1topcon">
                您好，
                <span>{{phone}}</span>
            </p>
        </div>
        <div class="Atopright">
            <div>
                <p class="one">当前积分</p>
                <p class="two">124</p>
            </div>
            <div>
                <p class="one">我的钱包</p>
                <p class="two">￥1220.0</p>
            </div>
            <div>
                <a href="###" class="three">充值有礼>></a>
                <a href="###" class="two" @click="todui()">充值卡兑换>></a>
            </div>
        </div>
    </div>
    <img src="../../assets/imgs/Accountmain1.png" alt="">
</div>
</template>

<script>
import Bus from './Bus';
export default {
    name:'Accountmain',
    data(){
        return{
            phone:'',
        }
    },
    methods:{
        todui(){
            this.$emit('xin1');
        }
    },
    mounted(){
        var a = this.$store.state.phone;
        var as = a.replace(a.substring(3, a.length - 4),'****');
        this.phone = as;
        Bus.$on('xin',data=>{
            console.log(data);
        })
    }
}
</script>

<style  scoped>
.A1main {
    height: 219px;
    border: 1px solid #e7e7e7;
    background: #f4fff2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.A1top {
    margin-left: 40px;
    /* margin-top: 40px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.A1topimg {
    margin-right: 41px;
}
.Atopright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Atopright div {
    display: flex;
    flex-direction: column;
    margin-right: 80px;
}
.Atopright div p {
    margin-bottom: 32px;
}
.Atopright a {
    margin-bottom: 32px;
}
.A1topcon {
    font-size: 18px;
    color: #666666;
}
.A1topcon span {
    color: #e85e35;
}
.one {
    color: #252525;
    font-size: 18px;
}
.two {
    color: #f08200;
    font-size: 18px;
}
.three {
    color: #4b943d;
    font-size: 18px;
}
</style>